<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TEST</title>
    <style>
      table,
      th,
      td {
        border: 1px solid rgb(5, 5, 5);
      }
      table {
        border-collapse: collapse;
      }
      td {
        text-align: center;
      }
      .modal-wrap {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background-color: rgba(5, 5, 5, 0.05);
      }
      .modal {
        width: 40%;
        height: 250px;
        background-color: #ffff;
        border-radius: 0.7em;
        margin: 10% auto;
        position: relative;
      }
      .modal .header {
        font-size: 1.5em;
        line-height: 32px;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
        position: relative;
      }
      .modal .btn-close {
        position: absolute;
        right: 10px;
      }
      .modal .btn-close:hover {
        cursor: pointer;
      }
      .modal .body {
        padding: 0 20px 0 20px;
      }
      .modal .footer {
        position: absolute;
        right: 20px;
        bottom: 10px;
      }
      .btn {
        border-radius: 0.4em;
        min-height: 20px;
        border: 1px solid gray;
        background-color: white;
        cursor: pointer;
      }
      .btn-yes {
        background-color: #0d6efd;
        color: white;
      }
      .btn-edit {
        color: #0d6efd;
        text-decoration: underline;
        border: 0px;
        background-color: white;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>
      <div style="text-align: center">课程管理</div>
      <table id="courses-table" style="margin: 0 auto">
        <tr>
          <th>课程名称</th>
          <th>课程编号</th>
          <th>课程学分</th>
          <th>操作</th>
        </tr>
      </table>
    </div>
    <div class="modal-wrap" id="modal" hidden>
      <div class="modal" id="inside">
        <div class="header">
          编辑课程信息
          <span onclick="modal_close()" class="btn-close">X</span>
        </div>
        <hr />
        <div class="body">
          <ul style="list-style: none" id="edit-list">
            <li>课程名称: <input type="text" /></li>
            <li>课程编号: <input type="text" /></li>
            <li>课程学分: <input type="text" /></li>
          </ul>
        </div>
        <hr />
        <div class="footer">
          <button onclick="modal_close()" class="btn">取消</button>
          <button id="btn-yes" class="btn btn-yes">保存</button>
        </div>
      </div>
    </div>
    <script>
      const courses = [
        { name: "程序设计基础", number: "001", credit: 4 },
        { name: "面向对象程序设计", number: "002", credit: 4 },
        { name: "web应用开发", number: "003", credit: 3 },
      ];
      const modal = document.getElementById("modal");
      const table = document.getElementById("courses-table");
      const edit_list = document.getElementById("edit-list");
      const btn_yes = document.getElementById("btn-yes");
      courses.forEach((it, index) => {
        const values = Object.values(it);
        const tr = document.createElement("tr");
        for (let value of values) {
          const td = document.createElement("td");
          td.textContent = value;
          tr.append(td);
        }
        const td = document.createElement("td");
        const button = document.createElement("button");
        button.textContent = "编辑";
        button.dataset.index = index + 1;
        button.classList.add("btn-edit");
        td.append(button);
        tr.append(td);
        table.append(tr);
      });
      table.addEventListener("click", (event) => {
        const btn_edit = event.target.closest(".btn-edit");
        if (!btn_edit || !table.contains(btn_edit)) return;
        modal.hidden = false;
        for (i = 0; i < 3; ++i)
          edit_list.children[i].children[0].value =
            table.children[btn_edit.dataset.index].children[i].textContent;
        btn_yes.dataset.index = btn_edit.dataset.index;
      });
      function modal_close() {
        modal.hidden = true;
      }
      btn_yes.addEventListener("click", (event) => {
        modal.hidden = true;
        for (i = 0; i < 3; ++i)
          table.children[event.target.dataset.index].children[i].textContent =
            edit_list.children[i].children[0].value;
      });
      modal.addEventListener("click", (event) => {
        const _modal = event.target.closest("#inside");
        if (!_modal) modal.hidden = true;
      });
    </script>
  </body>
</html>
